<template>
	<div class="table-box">
		<proTable
			ref="proTableRef"
			:columns="columns"
			:toolButton="false"
			:requestApi="api.GetRefereeEmployeePageListApi"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<template #tableHeader>
				<el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增裁判员</el-button>
				<el-button type="primary" @click="openDialog" :icon="Files">批量新增裁判员(小程序用户)</el-button>
			</template>
			<template #operation="scope">
				<el-space wrap>
					<el-tag style="cursor: pointer" @click="openDrawer('编辑', scope.row.id)"> 编辑 </el-tag>
					<el-tag @click="handleDelete(scope.row.id)" style="cursor: pointer" type="danger"> 删除 </el-tag>
				</el-space>
			</template>
		</proTable>
		<refereeDrawer ref="drawerRef" />
		<refereeDialong ref="dialongRef" />
	</div>
</template>

<script setup lang="tsx" name="referee">
import { ref, reactive } from "vue";
import api from "@/api/modules/referee";
import { ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Files } from "@element-plus/icons-vue";
import proTable from "@/components/ProTable/index.vue";
import refereeDrawer from "./components/refereeDrawer.vue";
import refereeDialong from "./components/refereeDialong.vue";
const drawerRef = ref();
const dialongRef = ref();
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		list: data.data,
		total: data.totalCount
	};
};
const handleDelete = (id: string) => {
	console.log(id);
};
// 表格配置项
const columns: Partial<ColumnProps>[] = [
	{ prop: "phone", label: "手机号", search: { el: "input", props: { placeholder: "请输入手机号" } } },
	{ prop: "idNumber", label: "身份证", search: { el: "input", props: { placeholder: "请输入身份证" } } },
	{
		prop: "name",
		label: "姓名",
		search: { el: "input", props: { placeholder: "请输入姓名" } }
	}
];
const openDrawer = (title: string, row: any | null = null) => {
	const params = {
		title,
		isView: title === "查看",
		row,
		api: api.AddRefereeEmployeeApi,
		getTableList: proTableRef.value.getTableList
	};
	console.log(params);
	drawerRef.value?.acceptParams(params);
};
// 批量新增裁判用户
const openDialog = () => {
	dialongRef.value?.acceptParams(proTableRef.value.getTableList);
};
</script>
<style>
.table-td-thumb {
	width: 40px;
	height: 40px;
}
</style>
